<template>
  <el-container class="layout-container-demo" style="height: 100vh;padding: 0;">
    <el-container>
      <el-header style="text-align: right; font-size: 12px; background-color: black;height: 10vh;padding: 0 12vw;">
        <div class="toolbar">
          <!-- 左侧 -->
          <div style="display: flex; align-items: center;">
            <img style="height: 7vh;" src="../assets/image/ruibo-logo.png" alt="logo">
            <h2 style="margin-left: 1rem;font-size: 2rem;">算法视界</h2>
          </div>
          <!-- 中间 -->
          <h2 style="font-size: 1.7rem;">欢迎体验众安睿博的AI算法能力</h2>
          <!-- 右边 -->
          <div style="display: flex; align-items: center;">
            <!-- 头像 目前打算只显示前几个字母或数字，暂定为4个-->
            <!-- 当状态是登录状态时 -->
            <el-dropdown v-if="authStore.user">
              <div style="cursor: default;">
              <el-avatar> User </el-avatar>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                  <el-dropdown-item @click="handleOpen('/changePassword')">修改密码</el-dropdown-item>
                  <!-- 非普用户 -->
                  <el-dropdown-item  v-if="!(authStore.user?.roleID === 3)"  @click="handleOpen('/Administratorsheader')">算法配置</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
              <!-- 当状态是未登录状态时 -->
              <div v-else>
              <!-- <el-avatar  @click="jumpToLogin"> User </el-avatar> -->
              </div>
          <div v-if="authStore.user?.username" style="margin-left: 18px;font-size: 1rem;margin-right: 18px;cursor: default;"> {{authStore.user?.username }}</div>
          <!-- 这里需要主要，点击登录进行页面跳转到登录页面 -->
          <div v-else style="margin-left: 18px;font-size: 1rem;margin-right: 18px;color: lightblue;cursor: default;"  @click="jumpToLogin">登录</div>
          </div>
        </div>
      </el-header>

      <el-dialog
          v-model="LoginVisible"
          width="500"
      >
      <LoginPage @close1="handleClose"></LoginPage>
      </el-dialog>
      <el-main class="main">
        <div class="main-container">
          <router-view></router-view>
        </div>
      </el-main>
      <el-footer style="text-align: left;display: flex; align-items: center; font-size: 10px; background-color: black;height: 10vh;padding: 0 12%;">
        <h2 style="color: white;"> ©2025 众安睿博. All rights reserved.</h2>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/user';
import { ElMessage, ElMessageBox } from 'element-plus'
import LoginPage from '../components/LoginPage.vue'
const router = useRouter()
const activeIndex = ref('/home')  // 默认选中首页
const authStore = useAuthStore();//使用store仓库进行数据管理
const LoginVisible = ref(false)

const handleOpen = (path: string) => {
  router.push(path)  // 跳转到对应的路由
  activeIndex.value = path  // 更新选中的菜单项
}
const jumpToLogin = () => {
  // 弹窗显示一下登录页面
  LoginVisible.value = true
}

const handleClose = () => {
  LoginVisible.value = false
}

const handleLogout = () => {
  ElMessageBox.confirm(
    '是否退出登录',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 页面跳转
      authStore.logout(); // 调用退出登录逻辑
      router.push('/'); // 跳转到登录页面
    })
    .catch(() => {
    })
};
</script>

<style scoped>

.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-8);
  color: var(--el-text-color-primary);
  padding: 0;
}

.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display:flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  right: 20px;
  color: white;
}
.el-menu-item {
  width: 200px;
  background: var(--el-color-primary-light-8);
}
.main {
  background-color: #0c294c;
}
.main-container {
  margin: 0 12vw;
  height: 100%;
  display:flex;
}
.el-anchor {
  --el-anchor-font-size: 18px; 
  --el-anchor-color: #fff;
  --el-anchor-line-height: 30px;
}
.custom-anchor-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px ; 
  color: #8b0d0d;
  padding: 10px 0; 
  transition: all 0.3s ease; 
}

.custom-anchor-link:hover {
  color: #ff9800; 
}

.custom-anchor-link.is-active {
  color: #ff9800; 
  font-weight: bold;
}

</style>
